<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>举报详情 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    body {
      background-color: #f8f9fa;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #333;
      padding-bottom: 70px;
    }
    
    /* 顶部导航 */
    .top-nav {
      background-color: #dc3545;
      padding: 15px 15px;
      color: white;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      text-align: center;
      margin: 0;
    }
    
    /* 举报主体信息 */
    .report-card {
      background-color: white;
      border-radius: 12px;
      margin: 15px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    
    .report-header {
      padding: 15px;
      border-bottom: 1px solid #eee;
    }
    
    .report-status {
      display: inline-block;
      font-size: 13px;
      padding: 4px 10px;
      border-radius: 12px;
      font-weight: 500;
      margin-bottom: 10px;
    }
    
    .status-pending {
      background-color: #fff3cd;
      color: #856404;
    }
    
    .status-processing {
      background-color: #d1ecf1;
      color: #0c5460;
    }
    
    .status-resolved {
      background-color: #d4edda;
      color: #155724;
    }
    
    .status-rejected {
      background-color: #e2e3e5;
      color: #495057;
    }
    
    .report-meta {
      font-size: 13px;
      color: #666;
      display: flex;
      justify-content: space-between;
    }
    
    .report-content-section {
      padding: 15px;
      border-bottom: 1px solid #eee;
    }
    
    .section-title {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 10px;
      color: #333;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .report-content {
      font-size: 15px;
      line-height: 1.6;
      color: #333;
    }
    
    /* 图片容器 */
    .report-images {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-top: 10px;
    }
    
    .report-image {
      width: 100%;
      aspect-ratio: 1;
      border-radius: 8px;
      object-fit: cover;
      background-color: #f8f9fa;
    }
    
    /* 用户信息 */
    .user-info {
      display: flex;
      align-items: center;
      padding: 15px;
      border-bottom: 1px solid #eee;
    }
    
    .user-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      margin-right: 12px;
      object-fit: cover;
    }
    
    .user-details {
      flex: 1;
    }
    
    .user-name {
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 3px;
    }
    
    .user-meta {
      font-size: 13px;
      color: #666;
    }
    
    .user-actions {
      text-align: right;
    }
    
    .user-action-btn {
      color: #dc3545;
      font-size: 14px;
      font-weight: 500;
      background: none;
      border: none;
      padding: 5px 10px;
    }
    
    /* 举报原因 */
    .report-reason {
      background-color: #f8f9fa;
      border-radius: 8px;
      padding: 12px;
      margin-top: 5px;
    }
    
    .reason-title {
      font-size: 14px;
      font-weight: 600;
      color: #dc3545;
      margin-bottom: 5px;
      display: flex;
      align-items: center;
      gap: 5px;
    }
    
    .reason-content {
      font-size: 14px;
      color: #555;
    }
    
    /* 操作记录区域 */
    .actions-section {
      padding: 15px;
    }
    
    .action-timeline {
      position: relative;
      padding-left: 28px;
      margin-top: 10px;
    }
    
    .action-timeline::before {
      content: '';
      position: absolute;
      left: 11px;
      top: 0;
      bottom: 0;
      width: 2px;
      background-color: #eee;
    }
    
    .timeline-item {
      position: relative;
      margin-bottom: 20px;
    }
    
    .timeline-item:last-child {
      margin-bottom: 0;
    }
    
    .timeline-dot {
      position: absolute;
      left: -28px;
      top: 3px;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background-color: white;
      border: 2px solid #dc3545;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .timeline-icon {
      font-size: 12px;
      color: #dc3545;
    }
    
    .timeline-content {
      background-color: white;
      border-radius: 8px;
      padding: 12px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    
    .timeline-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px;
    }
    
    .timeline-user {
      font-size: 14px;
      font-weight: 500;
    }
    
    .timeline-time {
      font-size: 12px;
      color: #999;
    }
    
    .timeline-text {
      font-size: 14px;
      line-height: 1.5;
      color: #555;
      margin-bottom: 8px;
    }
    
    .timeline-attachment {
      font-size: 13px;
      color: #0d6efd;
      display: flex;
      align-items: center;
      gap: 5px;
      margin-top: 5px;
    }
    
    /* 留言区域 */
    .comments-section {
      padding: 15px;
      background-color: white;
      margin: 15px;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    
    .comment-list {
      margin-top: 10px;
    }
    
    .comment-item {
      padding: 12px 0;
      border-bottom: 1px solid #eee;
    }
    
    .comment-item:last-child {
      border-bottom: none;
    }
    
    .comment-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
    }
    
    .comment-author {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .comment-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
    }
    
    .author-name {
      font-size: 14px;
      font-weight: 500;
    }
    
    .comment-time {
      font-size: 12px;
      color: #999;
    }
    
    .comment-text {
      font-size: 14px;
      line-height: 1.5;
      color: #333;
      margin-bottom: 8px;
    }
    
    .comment-actions {
      display: flex;
      gap: 15px;
      font-size: 13px;
    }
    
    .comment-action {
      color: #666;
      display: flex;
      align-items: center;
      gap: 5px;
      cursor: pointer;
    }
    
    .comment-reply {
      margin-left: 44px;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px dashed #eee;
    }
    
    /* 留言输入框 */
    .comment-input-section {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: white;
      padding: 10px 15px;
      border-top: 1px solid #eee;
      z-index: 90;
    }
    
    .comment-form {
      display: flex;
      gap: 10px;
    }
    
    .comment-input {
      flex: 1;
      border: 1px solid #ddd;
      border-radius: 20px;
      padding: 10px 15px;
      font-size: 14px;
      outline: none;
      resize: none;
      height: 42px;
      overflow-y: auto;
    }
    
    .comment-input:focus {
      border-color: #dc3545;
    }
    
    .comment-submit {
      background-color: #dc3545;
      color: white;
      border: none;
      border-radius: 50%;
      width: 42px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      cursor: pointer;
    }
    
    /* 处理操作按钮 */
    .action-buttons {
      display: flex;
      gap: 10px;
      padding: 15px;
      background-color: white;
      margin: 0 15px 15px;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    
    .action-btn {
      flex: 1;
      padding: 10px 0;
      border-radius: 8px;
      font-size: 15px;
      font-weight: 500;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    
    .btn-secondary {
      background-color: #f1f1f1;
      color: #666;
    }
    
    .btn-primary {
      background-color: #dc3545;
      color: white;
    }
    
    .btn-success {
      background-color: #28a745;
      color: white;
    }
    
    /* 处理弹窗 */
    .process-modal {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0,0,0,0.7);
      z-index: 1000;
      display: none;
      align-items: flex-end;
      justify-content: center;
    }
    
    .process-modal.active {
      display: flex;
    }
    
    .modal-content {
      background-color: white;
      border-radius: 16px 16px 0 0;
      width: 100%;
      max-width: 500px;
      padding: 20px;
      animation: slideUp 0.3s;
    }
    
    @keyframes slideUp {
      from { transform: translateY(100%); }
      to { transform: translateY(0); }
    }
    
    .modal-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 15px;
      text-align: center;
    }
    
    .process-options {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 20px;
    }
    
    .process-option {
      padding: 12px;
      border: 1px solid #eee;
      border-radius: 8px;
      text-align: center;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.2s;
    }
    
    .process-option.selected {
      border-color: #dc3545;
      background-color: #fef2f2;
      color: #dc3545;
      font-weight: 500;
    }
    
    .modal-textarea {
      width: 100%;
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 12px;
      font-size: 14px;
      min-height: 100px;
      resize: none;
      margin-bottom: 20px;
      outline: none;
    }
    
    .modal-textarea:focus {
      border-color: #dc3545;
    }
    
    .modal-actions {
      display: flex;
      gap: 10px;
    }
    
    .modal-btn {
      flex: 1;
      padding: 12px 0;
      border-radius: 8px;
      font-size: 15px;
      font-weight: 500;
      border: none;
    }
    
    .close-modal {
      position: absolute;
      top: 15px;
      right: 15px;
      background: none;
      border: none;
      font-size: 20px;
      color: #999;
      cursor: pointer;
    }
    
    /* 图片查看器 */
    .image-viewer {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: black;
      z-index: 2000;
      display: none;
      align-items: center;
      justify-content: center;
    }
    
    .image-viewer.active {
      display: flex;
    }
    
    .viewer-image {
      max-width: 100%;
      max-height: 90vh;
      object-fit: contain;
    }
    
    .viewer-close {
      position: absolute;
      top: 15px;
      right: 15px;
      color: white;
      font-size: 24px;
      background: none;
      border: none;
      cursor: pointer;
    }
    
    .viewer-nav {
      position: absolute;
      top: 50%;
      width: 100%;
      display: flex;
      justify-content: space-between;
      transform: translateY(-50%);
    }
    
    .viewer-btn {
      color: white;
      font-size: 30px;
      background: none;
      border: none;
      padding: 20px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <div class="top-nav d-flex justify-content-between align-items-center">
    <button class="btn btn-link p-0 text-white" onclick="history.back()">
      <i class="fa fa-arrow-left"></i>
    </button>
    <h1 class="nav-title">举报详情</h1>
    <div class="text-white">
      <i class="fa fa-ellipsis-v"></i>
    </div>
  </div>
  
  <!-- 举报基本信息 -->
  <div class="report-card">
    <div class="report-header">
      <div class="report-status status-pending">待处理</div>
      <div class="report-meta">
        <div>举报ID: REP20231026001</div>
        <div>举报时间: 今天 09:24</div>
      </div>
    </div>
    
    <div class="report-content-section">
      <div class="section-title">
        <i class="fa fa-file-text-o"></i> 举报内容
      </div>
      <div class="report-content">
        这个人发布的内容包含低俗图片，多次发布类似内容，严重影响社区氛围。希望平台能够严肃处理，维护良好的社区环境。
      </div>
      
      <div class="report-images">
        <img src="https://picsum.photos/400/400?random=10" alt="举报图片" class="report-image" data-index="0">
        <img src="https://picsum.photos/400/400?random=11" alt="举报图片" class="report-image" data-index="1">
        <img src="https://picsum.photos/400/400?random=12" alt="举报图片" class="report-image" data-index="2">
      </div>
      
      <div class="report-reason">
        <div class="reason-title">
          <i class="fa fa-flag"></i> 举报原因
        </div>
        <div class="reason-content">发布低俗色情内容，违反社区规定第3条：禁止发布任何低俗、色情或不雅内容，包括但不限于文字、图片、视频等形式。</div>
      </div>
    </div>
    
    <div class="user-info">
      <img src="https://picsum.photos/100/100?random=1" alt="用户头像" class="user-avatar">
      <div class="user-details">
        <div class="user-name">阳光正好</div>
        <div class="user-meta">举报用户 · ID: user123456 · 注册时间: 2023-05-10</div>
        <div class="user-meta">历史举报: 3次 · 举报成功率: 100%</div>
      </div>
      <div class="user-actions">
        <button class="user-action-btn">查看资料</button>
      </div>
    </div>
    
    <div class="user-info">
      <img src="https://picsum.photos/100/100?random=20" alt="用户头像" class="user-avatar">
      <div class="user-details">
        <div class="user-name">夜色迷人</div>
        <div class="user-meta">被举报用户 · ID: user654321 · 注册时间: 2023-01-15</div>
        <div class="user-meta">被举报次数: 8次 · 违规记录: 3次</div>
      </div>
      <div class="user-actions">
        <button class="user-action-btn">查看资料</button>
        <button class="user-action-btn">处理记录</button>
      </div>
    </div>
    
    <div class="report-content-section">
      <div class="section-title">
        <i class="fa fa-link"></i> 被举报内容
      </div>
      <div class="report-content">
        动态帖子《夜色中的美》
      </div>
      <div class="report-reason">
        <div class="reason-title">
          <i class="fa fa-file-text"></i> 内容摘要
        </div>
        <div class="reason-content">分享一组夜晚的城市照片，展现城市的另一面魅力... [查看完整内容]</div>
      </div>
      <div class="report-images">
        <img src="https://picsum.photos/400/400?random=30" alt="被举报内容图片" class="report-image" data-index="3">
      </div>
    </div>
  </div>
  
  <!-- 处理操作按钮 -->
  <div class="action-buttons">
    <button class="action-btn btn-secondary" id="rejectBtn">
      <i class="fa fa-times"></i> 驳回
    </button>
    <button class="action-btn btn-success" id="resolveBtn">
      <i class="fa fa-check"></i> 标记解决
    </button>
    <button class="action-btn btn-primary" id="punishBtn">
      <i class="fa fa-exclamation-triangle"></i> 处罚
    </button>
  </div>
  
  <!-- 操作记录 -->
  <div class="report-card">
    <div class="report-header">
      <div class="section-title">
        <i class="fa fa-history"></i> 处理记录
      </div>
    </div>
    
    <div class="actions-section">
      <div class="action-timeline">
        <div class="timeline-item">
          <div class="timeline-dot">
            <i class="fa fa-flag timeline-icon"></i>
          </div>
          <div class="timeline-content">
            <div class="timeline-header">
              <div class="timeline-user">系统</div>
              <div class="timeline-time">今天 09:24</div>
            </div>
            <div class="timeline-text">举报已提交，等待管理员处理</div>
          </div>
        </div>
        
        <div class="timeline-item">
          <div class="timeline-dot">
            <i class="fa fa-user timeline-icon"></i>
          </div>
          <div class="timeline-content">
            <div class="timeline-header">
              <div class="timeline-user">审核员小李</div>
              <div class="timeline-time">今天 10:15</div>
            </div>
            <div class="timeline-text">已收到举报，正在核实内容是否违规</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 留言区域 -->
  <div class="comments-section">
    <div class="section-title">
      <i class="fa fa-comments"></i> 处理留言
    </div>
    
    <div class="comment-list">
      <div class="comment-item">
        <div class="comment-header">
          <div class="comment-author">
            <img src="https://picsum.photos/100/100?random=50" alt="用户头像" class="comment-avatar">
            <div class="author-name">审核主管老王</div>
          </div>
          <div class="comment-time">今天 11:03</div>
        </div>
        <div class="comment-text">
          我初步查看了被举报内容，确实包含不符合社区规范的图片，建议按照规定进行处理，删除内容并给予警告。
        </div>
        <div class="comment-actions">
          <div class="comment-action">
            <i class="fa fa-reply"></i> 回复
          </div>
        </div>
        
        <div class="comment-reply">
          <div class="comment-header">
            <div class="comment-author">
              <img src="https://picsum.photos/100/100?random=51" alt="用户头像" class="comment-avatar">
              <div class="author-name">审核员小李</div>
            </div>
            <div class="comment-time">今天 11:10</div>
          </div>
          <div class="comment-text">
            收到，我会进一步确认并按照规定处理。
          </div>
          <div class="comment-actions">
            <div class="comment-action">
              <i class="fa fa-reply"></i> 回复
            </div>
          </div>
        </div>
      </div>
      
      <div class="comment-item">
        <div class="comment-header">
          <div class="comment-author">
            <img src="https://picsum.photos/100/100?random=52" alt="用户头像" class="comment-avatar">
            <div class="author-name">内容审核专员</div>
          </div>
          <div class="comment-time">今天 10:45</div>
        </div>
        <div class="comment-text">
          该用户历史上已有3次违规记录，均为发布低俗内容，建议本次处理加重处罚力度。
        </div>
        <div class="comment-actions">
          <div class="comment-action">
            <i class="fa fa-reply"></i> 回复
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 留言输入框 -->
  <div class="comment-input-section">
    <form class="comment-form">
      <textarea class="comment-input" placeholder="添加处理留言或备注..."></textarea>
      <button type="submit" class="comment-submit">
        <i class="fa fa-paper-plane"></i>
      </button>
    </form>
  </div>
  
  <!-- 处理弹窗 -->
  <div class="process-modal" id="processModal">
    <div class="modal-content">
      <h3 class="modal-title" id="modalTitle">处理举报</h3>
      
      <div class="process-options" id="processOptions">
        <div class="process-option" data-value="delete">删除内容</div>
        <div class="process-option" data-value="warning">警告用户</div>
        <div class="process-option" data-value="mute">禁言7天</div>
        <div class="process-option" data-value="ban">封禁账号</div>
      </div>
      
      <textarea class="modal-textarea" placeholder="请输入处理理由或备注（选填）"></textarea>
      
      <div class="modal-actions">
        <button class="modal-btn btn-secondary" id="cancelProcess">取消</button>
        <button class="modal-btn btn-primary" id="confirmProcess">确认处理</button>
      </div>
    </div>
  </div>
  
  <!-- 图片查看器 -->
  <div class="image-viewer" id="imageViewer">
    <button class="viewer-close" id="closeViewer">
      <i class="fa fa-times"></i>
    </button>
    <div class="viewer-nav">
      <button class="viewer-btn" id="prevImage">
        <i class="fa fa-chevron-left"></i>
      </button>
      <button class="viewer-btn" id="nextImage">
        <i class="fa fa-chevron-right"></i>
      </button>
    </div>
    <img src="" alt="大图预览" class="viewer-image" id="viewerImage">
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 处理弹窗相关
    const processModal = document.getElementById('processModal');
    const rejectBtn = document.getElementById('rejectBtn');
    const resolveBtn = document.getElementById('resolveBtn');
    const punishBtn = document.getElementById('punishBtn');
    const cancelProcess = document.getElementById('cancelProcess');
    const confirmProcess = document.getElementById('confirmProcess');
    const modalTitle = document.getElementById('modalTitle');
    const processOptions = document.getElementById('processOptions');
    
    // 打开处理弹窗
    function openProcessModal(title, showOptions = true) {
      modalTitle.textContent = title;
      
      // 显示或隐藏处理选项
      if (showOptions) {
        processOptions.style.display = 'grid';
      } else {
        processOptions.style.display = 'none';
      }
      
      processModal.classList.add('active');
    }
    
    // 关闭处理弹窗
    function closeProcessModal() {
      processModal.classList.remove('active');
    }
    
    // 绑定按钮事件
    rejectBtn.addEventListener('click', () => {
      openProcessModal('驳回举报', false);
    });
    
    resolveBtn.addEventListener('click', () => {
      openProcessModal('标记为已解决', false);
    });
    
    punishBtn.addEventListener('click', () => {
      openProcessModal('处罚处理');
    });
    
    cancelProcess.addEventListener('click', closeProcessModal);
    confirmProcess.addEventListener('click', () => {
      alert('处理已提交');
      closeProcessModal();
    });
    
    // 处理选项选择
    const processOptionItems = document.querySelectorAll('.process-option');
    processOptionItems.forEach(item => {
      item.addEventListener('click', function() {
        this.classList.toggle('selected');
      });
    });
    
    // 图片查看器
    const imageViewer = document.getElementById('imageViewer');
    const viewerImage = document.getElementById('viewerImage');
    const closeViewer = document.getElementById('closeViewer');
    const prevImage = document.getElementById('prevImage');
    const nextImage = document.getElementById('nextImage');
    const reportImages = document.querySelectorAll('.report-image');
    let currentImageIndex = 0;
    const imageSources = Array.from(reportImages).map(img => img.src);
    
    // 打开图片查看器
    reportImages.forEach((img, index) => {
      img.addEventListener('click', () => {
        currentImageIndex = index;
        viewerImage.src = imageSources[index];
        imageViewer.classList.add('active');
      });
    });
    
    // 关闭图片查看器
    closeViewer.addEventListener('click', () => {
      imageViewer.classList.remove('active');
    });
    
    // 切换图片
    prevImage.addEventListener('click', () => {
      currentImageIndex = (currentImageIndex - 1 + imageSources.length) % imageSources.length;
      viewerImage.src = imageSources[currentImageIndex];
    });
    
    nextImage.addEventListener('click', () => {
      currentImageIndex = (currentImageIndex + 1) % imageSources.length;
      viewerImage.src = imageSources[currentImageIndex];
    });
    
    // 点击图片外部关闭
    imageViewer.addEventListener('click', (e) => {
      if (e.target === imageViewer) {
        imageViewer.classList.remove('active');
      }
    });
    
    // 留言提交
    const commentForm = document.querySelector('.comment-form');
    const commentInput = document.querySelector('.comment-input');
    
    commentForm.addEventListener('submit', function(e) {
      e.preventDefault();
      const commentText = commentInput.value.trim();
      
      if (commentText) {
        alert('留言已提交');
        commentInput.value = '';
      }
    });
    
    // 回复功能
    const replyButtons = document.querySelectorAll('.comment-action');
    replyButtons.forEach(btn => {
      btn.addEventListener('click', function() {
        const authorName = this.closest('.comment-item').querySelector('.author-name').textContent;
        commentInput.value = `回复 @${authorName}: `;
        commentInput.focus();
      });
    });
  </script>
</body>
</html>
